<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="bean.User" %>
<%@ page import="bean.News" %>
<%@ page import="java.util.List" %>
<%@ page import="bean.NewsofUser" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>时讯界新闻发布系统</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f2f7fd; /* Light blue-gray background */
            margin: 0;
            padding: 0;
        }
        .container-fluid {
            display: flex;
            height: 100vh;
            padding: 0;
        }
        .sidebar {
            background-color: #435b71; /* Dark blue sidebar */
            color: #fff;
            padding-top: 20px;
            flex: 0 0 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
        }
        .active {
            background-color: transparent; /* Hide background */
            border: none; /* Hide border */
            display: block;
            color: #fff;
            padding: 10px 15px;
            text-decoration: none;
            width: 100%;
            text-align: center;
            transition: background-color 0.3s;
            border-radius: 4px;
            margin-bottom: 8px;
        }

        .sidebar a {
            color: #fff;
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            width: 100%;
            text-align: center;
            transition: background-color 0.3s;
            border-radius: 4px;
            margin-bottom: 8px;
        }
        .sidebar a:hover, .sidebar  {
            background-color: #567c92; /* Light blue on hover */
            text-decoration: none;
        }

        .main-content {
            background-color: #fff;
            flex-grow: 1;
            padding: 30px;
            display: flex;
            flex-direction: column;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
            overflow: hidden;
        }
        .user-info {
            text-align: center;
            padding: 20px 0;
        }
        .user-info img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        .user-info img:hover {
            transform: scale(1.1);
        }
        .user-info p {
            margin: 0;
            font-size: 22px;
            color: #333;
        }
        .iframe-container {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            margin-top: 20px;
        }
        .iframe-container iframe {
            flex-grow: 1;
            width: 100%;
            border: none;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .selected {
            font-weight: bold;
        }
        .modal-content {
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        .modal-header {
            border-bottom: none;
            background-color: #007bff; /* Blue modal header */
            color: #fff;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        .modal-title {
            font-size: 24px;
            color: #fff;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-control {
            border-radius: 4px;
            border-color: #ccc;
        }
        .modal-footer {
            border-top: none;
            background-color: #f8f9fa; /* Light gray modal footer */
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }
    </style>
</head>
<body>
<% User user = (User) request.getSession().getAttribute("user"); %>
<div class="container-fluid">
    <div class="sidebar">
        <div class="user-info">
            <img src="../resources/headimg/<%= user.getHeadimg()%>" alt="User Avatar">
            <p>Hello, <%= user.getUsername() %></p>
        </div>
        <button class="active" data-toggle="modal" data-target="#accountModal">账号管理</button>
        <a href="#" onclick="selectLink(event); loadPage('News.jsp')">时讯新闻</a>
        <c:if test="${isUserAdmin}">
            <a href="#" onclick="selectLink(event); loadPage('../userlimit')">用户管理</a>
        </c:if>
        <a href="#" onclick="selectLink(event); loadPage('publish.jsp')">发布新闻</a>
        <a href="#" onclick="selectLink(event); return confirmLogout()">退出登录</a>
    </div>
    <div class="main-content">
        <h1 class="text-center" style="font-family: 'KaiTi', serif; font-size: 36px;">欢迎使用重庆工程学院新闻发布系统</h1>

        <div class="iframe-container">
            <iframe id="contentFrame" src="../testlimit"></iframe>
        </div>
    </div>
</div>
<!-- Account Management Modal -->
<div class="modal fade" id="accountModal" tabindex="-1" aria-labelledby="accountModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="accountModalLabel">账号管理</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="../userServlet?id=<%= user != null ? user.getId() : "" %> " method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="avatar">当前头像</label>
                        <div>
                            <img src="../resources/headimg/<%= user != null ? user.getHeadimg() : "" %>" alt="当前头像" style="max-width: 150px; max-height: 150px;">
                        </div>
                        <label for="avatar">修改头像</label>
                        <input type="file" class="form-control-file" id="avatar" name="avatar">
                    </div>
                    <div class="form-group">
                        <label for="username">修改账号</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="请输入新的账号" value="<%= user != null ? user.getUsername() : "" %>">
                    </div>
                    <div class="form-group">
                        <label for="password">修改密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入新的密码" value="<%= user != null ? user.getPassword() : "" %>">
                    </div>
                    <div class="form-group">
                        <label for="gender">修改性别</label>
                        <select class="form-control" id="gender" name="sex">
                            <option value="0" <%= user != null && "0".equals(String.valueOf(user.getSex())) ? "selected" : "" %>>男</option>
                            <option value="1" <%= user != null && "1".equals(String.valueOf(user.getSex())) ? "selected" : "" %>>女</option>
                            <option value="2" <%= user != null && "2".equals(String.valueOf(user.getSex())) ? "selected" : "" %>>其他</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" name="update1" value="update1">保存修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    function confirmLogout() {
        if (confirm("确认退出登录吗?")) {
            window.location.href = "login.jsp";
        }
        return false;
    }

    function loadPage(page) {
        document.getElementById('contentFrame').src = page;
    }
</script>
<script>
    function selectLink(event) {
        // 移除所有链接的选中状态
        let links = document.querySelectorAll("a");
        links.forEach(link => link.classList.remove("selected"));

        // 选中当前点击的链接
        event.target.classList.add("selected");
    }
</script>
</body>
</html>
